<template>
    <div class="register">
        <!-- logo -->
        <img src="../../static/images/logo.png" alt="" style="position:fixed;left:40px;top:20px;width:100px;height:100px;">
        <div class="register-header">
            <img src="../../static/images/register/title.png" style="margin-top: 6%;">
        </div>
        <div class="register-content">
            <div class="limitWidth">
                <!--注册框-->
                <div v-if="showSome==1">
                    <div class="cTitle">注册账号</div>
                    <reg :showSome="showSome" :showHook="showHook" @findShow="findShow" @goLogin="changeShow"></reg>
                    <div class="regBtnBottom">
                        <div @click="showHook=!showHook"
                             style="display: flex;align-items: inherit;cursor: pointer;font-size:14px">
                            <img src="../../static/images/register/组 8@2x.png"
                                 class="img1"
                                 v-if="showHook">
                            <img src="../../static/images/register/kuang.png"
                                 class="img2"
                                 v-if="!showHook">
                            <a @click.stop="readAgreement">阅读</a>
                            并同意协议
                        </div>

                        <div style="cursor:pointer;display: flex;align-items: center;" @click='showSome = 4'>
                            <!--                            <img-->
                            <!--                                src="../../static/images/register/微信方.png"-->
                            <!--                                style="height: 17px;position: relative;top: 2px;">微信登录-->
                        </div>
                        <div style="color: #2d9fd8;cursor: pointer" @click="changeShow(2)">返回登录</div>

                    </div>
                </div>
                <!--登录框-->
                <Login @logShow="logShow" v-show="showSome==2" @wxShow='changeShow'></Login>
                <!--找回密码-->
                <find-password @findShow="findShow" v-show="showSome==3"></find-password>
            </div>
            <!-- 微信登录 -->
            <div class='limitWidth wxregister' v-if='showSome == 4'>
                <div class="cTitle">微信登录</div>
                <div id='wxLogin'></div>
                <!-- <wxlogin :appid="appid" :scope="scope" :redirect_uri="redirect_uri" :state='state' :style='style'></wxlogin> -->
                <img @click="showWxShadow = 'block'" src="../../static/images/register/wx2.png" alt="二维码失效，请刷新或者账号登录"
                     title='微信登录二维码' style='width:240px'>
                <p style='margin-top:8px;margin-bottom:10px'>请使用微信扫描二维码登录</p>
                <p>"会计岛题库模拟系统"</p>
                <div class="wxregGoLogin">
                    <div style="color: #2d9fd8" @click="showSome = 2">返回登录</div>
                </div>
            </div>
            <img src="../../static/images/register/yinzi@2x.png"
                 style="margin-left: -260px;position: absolute;margin-top: -30px;">
        </div>
        <div class="register-footer">
            <div class="footerUp">
                <a href="http://www.kuaijidao.cn/page/aboutus" target="_blank" style="color: #333333">
                    <img src="../../static/images/register/zhuce_guanyuwomen@2x.png">
                    关于我们
                </a>
                <div @click="openCusCenter" style="cursor:pointer;">
                    <img src="../../static/images/register/zhuce_kehuzhognxin@2x.png">
                    客户中心
                </div>
                <div style="cursor:pointer;position:relative" @click.stop="clickShowPoptipHandle('1')">
                    <img src="../../static/images/register/zhuce_guanzhuwomen@2x.png">
                    关注我们
                    <div class="ivu-poptip-body" v-show="showPopTip" >
                        <div class="ivu-poptip-body-content">
                            <div style='padding: 10px 21px;
    background-color: #fff;'>
                                <img src="../../static/images/register/wx.jpg" style="width:160px;">
                            </div>
                            <div class='ivu-poptip-body-text'>
                                关注微信公众号<br>获取更多精彩内容!
                            </div>
                        </div>
                        <div class='ivu-poptip-body-sanjiao'></div>
                    </div>
                </div>
            </div>
            <div class="footerMiddle">
                内容版权均归 北京正来教育科技有限公司旗下会计岛 所有
            </div>
            <div class="footerDown">
                Copyright 2019-2022 <a href="http://www.kuaijidao.cn" target="_blank">www.kuaijidao.cn</a> All Rights Reserved
            </div>
        </div>

        <div class="shadow" :style="{display:shadowDisplay}">
            <!--客服中心弹框-->
            <div class="cusCenter" v-drag="show" :style="{display:cusDisplay}">
                <div style="position: absolute;right: -5px;top: -10px;background:#fff;width:21px;height:21px;border-radius:50%;">
                    <img src="../../../public/static/images/regFooter/dianhuakefu_cuohao.png"
                        style='position:absolute'
                      @click="closeCus">
                </div> 
                <div class="cusBg">
                    <div class="cuTitle">客户中心</div>
                    <div class="cuCon" v-for="(cus,index) in cusList" :key="index"><img :src="cus.src">
                        <div style="color: #0B92CC">{{cus.title}}</div>
                        {{cus.content}}
                    </div>
                </div>
            </div>
        </div>
        <!--阅读协议-->
        <read-me id="readMe" style="display: none"></read-me>
        <div class="shadow" :style="{display:showWxShadow}">
            <!--wx登陆弹框-->
            <div class="cusCenter wxcusCenter limitWidth" :style="{display:showWxShadow}">
                <div class='wxPupTitle '>绑定账号</div>
                <p>为获取更优质服务，请绑定您的手机账号</p>
                <div style='padding:0 20px'>
                    <reg :showSome="showSome"></reg>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import axios from "axios";

    import Login from '../../components/register/login'
    import findPassword from "../../components/register/findPassword";
    import reg from "../../components/register/register";
    import wxlogin from 'vue-wxlogin';
    import '../../assets/js/wxLogin.js';
    import readMe from "../../components/register/readMe";

    export default {
        name: 'register',
        components: {
            Login,
            findPassword,
            reg,
            readMe,
            wxlogin
        },
        data() {
            return {

                showHook: false,
                appid: 'wx84e0080fee80c7b5',
                scope: "snsapi_login",
                redirect_uri: "", // 授权成功后回调的url
                state: "121212", // 可设置为简单的随机数加session用来校验
                style: "black", // 提供"black"、"white"可选。二维码的样式
                href: "", // 外部css文件url，需要https
                checked: false,
                // wx登录的弹窗
                showWxShadow: 'none',
                //弹框
                show: true,
                shadowDisplay: 'none',
                cusDisplay: 'none',

                //???
                phoneNumber: '',//手机号
                passwordNumber: '',//密码
                codeNumber: '',//验证码
                verification_codeNumber: '',//手机号验证码
                qrcodeUrl: 'http://39.106.157.123:8301/verification_code',//验证码路径

                //切换登录注册
                showSome: 2,
                // 显示关注我们的二维码
                showPopTip:false,
                //*****弹框
                cusList: [
                    {
                        src: '../../static/images/regFooter/kefudianhua_shijian.png',
                        title: '工作时间:',
                        content: '9：30-——23：00'
                    },
                    {
                        src: '../../static/images/regFooter/dianhuakefu_dianhua.png',
                        title: '联系电话:',
                        content: '010-53398381'
                    },
                    {
                        src: '../../static/images/regFooter/kefudianhua_youxiang.png',
                        title: '企业邮箱:',
                        content: 'kuaijidao001@163.com'
                    }
                ],
                // 微信登录部分
                wxContent: false
            }
        },
        mounted() {
            document.addEventListener('click',this.clickShowPoptipHandle);
        },
        beforeDestroy(){
            document.removeEventListener('click',this.clickShowPoptipHandle);
        },
        methods: {
            clickShowPoptipHandle(type){
                if(type == '1'){
                    this.showPopTip = !this.showPopTip;
                }else{
                    this.showPopTip = false
                }
            },
            // 生成二维码
            // encodeURIComponent('http://www.coolarch.net/Mingzhu/wechat/callBack')
            //切换成登录注册
            changeShow(e) {
                this.showSome = e;
            },
            //验证表单
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

            //打开客服中心
            openCusCenter() {
                this.shadowDisplay = 'block';
                this.cusDisplay = 'block';
            },

            //关闭客服中心
            closeCus() {
                this.shadowDisplay = 'none';
                this.cusDisplay = 'none';
            },

            findShow(showFind) {
                // showSome就是子组件传过来的值
                this.showSome = showFind
            },

            logShow(showLog) {
                // showLog就是子组件传过来的值
                this.showSome = showLog
            },

            //阅读协议
            readAgreement() {
                layer.open({
                    type: 1,
                    title: ' ',
                    area: '800px',
                    content: $('#readMe'),
                })
            }
        },
        /*实现拖拽*/
        directives: {
            drag(el) {
                let oDiv = el; //当前元素
                let self = this; //上下文
                //禁止选择网页上的文字
                document.onselectstart = function () {
                    return false;
                };
                oDiv.onmousedown = function (e) {
                    //鼠标按下，计算当前元素距离可视区的距离
                    let disX = e.clientX - oDiv.offsetLeft;
                    let disY = e.clientY - oDiv.offsetTop;
                    document.onmousemove = function (e) {
                        //通过事件委托，计算移动的距离
                        let l = e.clientX - disX;
                        let t = e.clientY - disY;
                        //移动当前元素
                        oDiv.style.left = l + "px";
                        oDiv.style.top = t + "px";
                    }
                    document.onmouseup = function (e) {
                        document.onmousemove = null;
                        document.onmouseup = null;
                    };
                    //return false不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
                    return false;
                };
            }
        },

    }
</script>

<style lang="scss">
    .register {
        min-height: 780px;
        position: relative;
        background-image: url("../../static/images/register/bgImg.png");
        min-width: 1020px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        .register-content {
            width: 460px;
            background-color: #FFFFFF;
            top: 25%;
            position: absolute;
            border-radius: 3%;
            left:50%;
            transform: translateX(-50%);
            .limitWidth {
                margin: 5% 9%;
                text-align: center;

                .cTitle {
                    font-size: 25px;
                    margin: 15px 15px;
                }

                .el-input__inner {
                    /*height: 55px;*/
                    padding-left: 33px;
                }

                .phonePic {
                    background-image: url("../../static/images/register/电话.png");
                    background-repeat: no-repeat;
                    width: 43px;
                    height: 100%;
                    position: absolute;
                    top: 10px;
                }

                .namePic {
                    background-image: url("../../static/images/register/用户名.png");
                    background-repeat: no-repeat;
                    width: 43px;
                    height: 100%;
                    position: absolute;
                    top: 10px;
                }

                .passPic {
                    background-image: url("../../static/images/register/密码.png");
                    background-repeat: no-repeat;
                    width: 43px;
                    height: 100%;
                    position: absolute;
                    top: 10px;
                }

                .regButton {
                    background-image: url("../../static/images/register/矩形 3 拷贝 3.png");
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    width: 100%;
                    color: #FFFFFF;
                    font-size: 20px;
                    letter-spacing: 5px;
                }

                .regBtnTop {
                    margin-bottom: 3%;
                    display: flex;
                    justify-content: space-between;
                    align-items: baseline;
                    margin-right: 5%;
                    margin-left: 5%
                }

                .regBtnBottom {
                    margin-bottom: 5%;
                    display: flex;
                    justify-content: space-between;
                    align-items: baseline;

                    .readArguement {
                        cursor: pointer;
                        display: flex;
                        align-items: baseline;
                    }

                    .img1 {
                        vertical-align: bottom;
                        position: relative;
                        top: 7px;
                    }

                    .img2 {
                        vertical-align: bottom;
                        position: relative;
                        top: 7px;
                        width: 24px;
                        height: 23px;
                    }

                    a {
                        text-decoration: underline;
                        color: #0e90d2;
                    }

                    .bottomReg {
                        display: flex;
                        align-items: baseline;

                        .brOne {
                            color: gray;
                            margin-right: 5px;
                            font-size: 14px;
                        }

                        .brTwo {
                            color: #2d9fd8;
                            cursor: pointer;
                            /*font-size:14px;*/
                        }
                    }
                }
            }

            .wxregister {
                p {
                    width: 100%;
                    height: 10px;
                    font-size: 9px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: rgba(102, 102, 102, 1);
                    line-height: 9px;
                    margin: 0;
                }

                .wxregGoLogin {
                    overflow: hidden;
                    padding-right: 50px;
                    margin-top: 23px;

                    div {
                        float: right;
                        line-height: 20px;
                        cursor: pointer;
                    }
                }
            }
        }

        .register-footer {
            bottom: 8%;
            position: absolute;
            /*height: 10px;*/
            font-size: 14px;
            left:50%;
            transform: translateX(-50%);
            .footerUp {
                display: flex;
                justify-content: space-around;
                width: 400px;
                .ivu-poptip-body{
                    position: absolute;
                    bottom: 37px;
                    left: -60px;
                    z-index: 999;
                    transition: all 1s;
                    .ivu-poptip-body-content{
                        padding: 5px;
                        background-color:#ddd;
                        .ivu-poptip-body-text{
                            background-color: #fff;
                            color:#333;
                            text-align: center;
                            padding:5px; 
                        }
                    }
                    .ivu-poptip-body-sanjiao{
                        width:0;
                        height:0;
                        border-top: 10px solid #ddd;
                        border-left: 10px solid transparent;
                        border-right: 10px solid transparent;
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%)
                    }
                }
            }

            .footerMiddle {
                color: grey;
                text-align: center;
            }

            .footerDown {
                color: grey;
                text-align: center;
            }
        }

        .cusCenter {
            position: absolute;
            width: 350px;
            top: 40%;
            left: 40%;
            cursor: pointer;
            z-Index: 9999;

            .cuTitle {
                color: white;
                font-size: 23px;
                text-align: center;
                margin-bottom: 5%;
            }

            .cusBg {
                background-image: url("../../../public/static/images/regFooter/beijing@2x.png");
                background-size: 100% 100%;
                background-repeat: no-repeat;
                height: 150px;
            }

            .cuCon {
                display: flex;
                margin: 1% 10%;
                align-items: flex-end;

                img {
                    width: 20px;
                    height: 20px;
                }
            }
        }

        .wxcusCenter {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 40px;
            margin: auto;
            background: #fff;
            border: 4px solid #0393CD;
            border-radius: 10px;
            overflow: hidden;
            width: 460px;
            height: 450px;
            // .el-input__inner{
            //     height: 55px;
            //     padding-left: 55px;
            // }
            .wxPupTitle {
                width: 100%;
                height: 60px;
                color: white;
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;
                border-bottom: 4px solid #0393CD;
                line-height: 2;
                font-family: Microsoft YaHei;
                font-size: 28px;
                text-align: center;
                background: url('../../static/images/register/wxbg.jpg');
            }

            .el-input__inner {
                padding-left: 33px;
            }

            & > p {
                width: 100%;
                text-align: center;
                height: 9px;
                font-size: 9px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: rgba(149, 152, 157, 1);
                line-height: 9px;
            }

            .phonePic, .namePic, .passPic {
                top: 10px;
            }
        }
    }

    .shadow {
        position: absolute;
        left: 0px;
        top: 0px;
        background: rgba(0, 0, 0, 0.4);
        width: 100%; /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
        height: 100%;
        /*filter: alpha(opacity=60); !*设置透明度为60%*!*/
        /*opacity: 0.6; !*非IE浏览器下设置透明度为60%*!*/
        display: none;
        z-Index: 999;
    }
</style>

